<template>
  <grid-layout :layout="layout" :item-style="{ padding: '15px' }">
    <template #left>
      <split-title text="酒店基础信息" />
      <descriptions :columns="columns.slice(0, 3)" :data-source="hotelDetail" :col-span="24" />
      <a-row>
        <a-col :span="12" v-for="item in hotelDetail.picture_list" :key="item">
          <img :src="item" style="width: 105px; height: 105px" />
        </a-col>
      </a-row>
      <split-title text="房间基本信息" style="margin-top: 20px" />
      <descriptions :columns="columns.slice(3)" :data-source="hotelDetail" :col-span="24" />
      <div>
        <span>房间管控:</span>
        <span style="color: #f6bd16; cursor: pointer" @click="manageHandle">
          {{ hotelDetail.status ? '暂未管控' : '已管控' }}
        </span>
      </div>
    </template>
    <template #right>
      <div style="width: 100%; height: 100%" class="flex flex-column">
        <tabs-group :data-list="dataList" v-model="activeKey" class="flex-fixed" style='width: 100%'/>
        <component
          v-if="show"
          class="flex-auto-height"
          :is="tabPages[activeKey]"
          :details="hotelDetail"
          style="width: 100%; padding: 15px"
        />
      </div>
    </template>
  </grid-layout>
</template>

<script>
import { homestayWarningHotelDetail } from '@gis/lib/api';
import GridLayout from '@gis/lib/layouts/grid-layout.vue';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import { dialog } from '@gis/lib/components/antd-dialog';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import SplitTitle from '@gis/lib/components/splitter/split-title.vue';

import CurrentLiveInfo from './current-live-info.vue';
import HistoryCheckRecord from './hotel-room/history-check-record.vue';
// import WarningRecordAction from './warning-record/warning-record-action.vue';
import WarningRecordAction from './warning-record/warning-record-action-old.vue';
import ControlRecord from './control-record.vue';

export default {
  name: 'homestay-room-detail',
  components: { SplitTitle, TabsGroup, GridLayout },
  props: {
    details: { type: Object, default: () => {} },
  },
  data() {
    return {
      show: false,
      stateEnum: {
        1: '空闲',
        2: '使用中',
        3: '预警',
        4: '关注',
      },
      hotelDetail: {},
      dataList: [
        { label: '当前入住信息', value: '1' },
        { label: '历史入住信息', value: '2' },
        { label: '预警记录', value: '3' },
        { label: '管控记录', value: '4' },
      ],
      activeKey: '1',
      tabPages: {
        1: CurrentLiveInfo,
        2: HistoryCheckRecord,
        3: WarningRecordAction,
        4: ControlRecord,
      },
      layout: [
        { name: 'left', colSpan: 6 },
        { name: 'right', colSpan: 18, style: { padding: 0 } },
      ],
      columns: [
        { label: '姓名', key: 'manager' },
        { label: '联系电话', key: 'manager_phone' },
        { label: '酒店介绍', key: 'hotel_simple_introduce' },
        { label: '房间地址', key: 'room_full_name' },
        { label: '房间描述', key: 'room_describe' },
        { label: '房屋状态', key: 'state', format: (v) => this.stateEnum[v] },
        { label: '产权人', key: 'owner_name' },
      ],
    };
  },
  watch: {
    details: {
      immediate: true,
      deep: true,
      handler(val) {
        //field1从预警列表来的
        if (val.room_id || val.field1) {
          this.getDetail();
        }
      },
    },
  },
  methods: {
    async getDetail() {
      this.show = false;
      const params = {
        room_id: this.details.room_id || this.details.field1,
      };
      this.hotelDetail = await handleCommonRes(homestayWarningHotelDetail(params));
      this.show = true;
    },
    manageHandle() {
      if (!this.hotelDetail) return;
      dialog({
        content: () => import('./hotel-room/lock-state.vue'),
        contentProps: {
          room: this.hotelDetail,
        },
        dialogProps: {
          title: `${this.hotelDetail.status ? '锁定' : '解锁'}提示`,
          onOk: () => {
            this.getDetail();
          },
        },
      });
    },
  },
};
</script>

<style lang="less">
/*.homestay-room-detail {
  width: 100%;
  height: 100%;
  .title {
    margin-bottom: 15px;
  }
  /deep/ .grid-layout > .grid-layout-row > .ant-col {
    padding: 0;
  }
}*/
</style>
